<template>
    <div>
        <!-- 轮播图 -->
        <Carousel />
        <!-- 首页搜索医院的表单区域 -->
        <Search />
        <!-- 底部展示 -->
        <el-row :gutter=20>
            <el-col :span="20">
                <!-- 等级组件 -->
                <Level @getLevel="getLevel" />
                <!-- 地区组件 -->
                <Region @getRegion="getRegion" />
                <!-- 医院卡片 -->
                <div class="card-container" v-if="hospitalArr.length > 0">
                    <Card class="card-item" v-for="(item, index) in hospitalArr" :key="index" :hospitalInfo="item" />
                    <!-- 分页 -->
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 30, 40]" layout=" prev, pager, next, jumper, sizes,total" :total="total"
                        @current-change="currentChange" @size-change="sizeChange" />
                </div>
                <el-empty v-else description="此筛选条件下无匹配医院" />
            </el-col>

            <el-col :span="4">
                <!-- 首页右侧（常见科室 | 平台公告 | 停诊公告） -->
                <Tip />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import Carousel from "./carousel/index.vue"
import Search from "./search/index.vue"
import Level from "./level/index.vue"
import Region from "./region/index.vue"
import Card from "./card/index.vue"
import Tip from "./tip/index.vue"

import type { Content, HospitalResponseData } from "@/api/home/type"

import { ref, onMounted } from 'vue'

import { getHospitalAPI } from "@/api/home"

let currentPage = ref<number>(1)
let pageSize = ref<number>(10)


//组件挂载完毕
onMounted(() => {
    getHospital()
})

//获取已有医院数据
const getHospital = async () => {
    let result: HospitalResponseData = await getHospitalAPI(currentPage.value, pageSize.value, hostype.value, districtCode.value)
    if (result.code == 200) {
        hospitalArr.value = result.data.content
        total.value = result.data.totalElements
    }
}

//存储已有的医院数据
let hospitalArr = ref<Content>([])
//存储医院总个数
let total = ref<number>(0)

//存储医院等级
let hostype = ref<string>('')
//存储医院地区
let districtCode = ref<string>('')


//分页器页码发生变化时的回调
const currentChange = () => {
    getHospital()
}
//分页器下拉菜单发生变化时的回调
const sizeChange = () => {
    getHospital()
}

//子组件自定义事件
const getLevel = (level: string) => {
    hostype.value = level
    //再次发请求
    getHospital()
}

const getRegion = (region: string) => {
    districtCode.value = region
    //再次发请求
    getHospital()
}
</script>


<style scoped lang="scss">
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .card-item {
        width: 48%;
        margin: 10px 0;
    }
}
</style>